.list {
  @apply w-full;

  .items {
    @apply flex flex-wrap overflow-y-hidden;

    .phone {
      @apply relative mt-3 block;
      transition: all 0.3s;

      &::after {
        @apply absolute w-full h-full left-0 top-0;
        content: '';
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(0.25rem);
      }

      .actorDetail {
        @apply absolute left-2/4 top-2/4 z-2 flex flex-col items-center p-2 w-full;
        transform: translate(-50%, -50%);
        .p {
          @apply text-white text-base leading-4 mb-6 block w-full text-center;
        }

        & > img {
          width: 2.875rem;
          height: 2.875rem;
        }
      }
    }

    .item {
      @apply relative cursor-pointer mt-3 rounded;
      transition: all 0.3s;
      box-shadow: var(--shadow);

      &:hover {
        @apply z-1 rounded;
        transform: scale(1.2);

        .detail {
          @apply rounded;

          .bottomDetail {
            @apply h-full;
            padding-bottom: 0.9375rem;

            .name {
              @apply text-xl text-white h-5 leading-5;
              margin-bottom: 0.625rem;
            }

            .type {
              @apply flex w-full;

              .typeInfo {
                @apply w-full;
              }
            }

            .desc {
              @apply overflow-hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      .bg {
        @apply w-full h-full absolute left-0 top-0 rounded;
        aspect-ratio: 22/33;
      }

      .detail {
        @apply flex flex-col justify-end absolute w-full h-full top-0 left-0 rounded;

        .bottomDetail {
          @apply w-full px-5 flex flex-col justify-end rounded;
          padding-bottom: 0.625rem;
          height: 18.264%;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

          .mark {
            @apply text-sm text-white-80 flex items-center mr-2;
            height: 0.875rem;
            line-height: 0.875rem;

            .tmdb {
              @apply w-6 h-4 mr-1;
            }

            .douban {
              @apply mr-1;
              width: 0.875rem;
              height: 0.875rem;
            }
          }

          .name {
            @apply text-white-80 text-base leading-4;
          }

          .type {
            @apply hidden w-full h-12 flex justify-between items-center;
            margin-bottom: 0.9375rem;

            .typeInfo {
              @apply text-white text-xs leading-3;

              .countStr {
                @apply text-xs;
                margin-top: 0.625rem;
                @apply text-white-60;

                &:span::first-child {
                  @apply mr-5;
                }
              }
            }
          }

          .desc {
            @apply hidden text-white-60 text-sm;
          }
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 767px) {
  .list {
    margin-top: 0 !important;

    .items {
      @apply flex-nowrap overflow-x-auto;
      padding: 0 !important;
      .phone {
        @apply shrink-0;

        &:hover {
          transform: scale(1);
        }

        .actorDetail {
          .p {
            @apply text-sm leading-3 mb-3 overflow-hidden leading-6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          & > img {
            @apply w-6 h-6;
          }
        }
      }

      .item {
        @apply shrink-0;
        width: calc((100vw - 48px) / 3) !important;
        height: calc(((100vw - 48px) / 3) * 1.5) !important ;
        &:hover {
          transform: scale(1);
        }

        .detailPhone {
          @apply w-full absolute bottom-0 left-0 px-1 flex flex-col justify-end;
          height: 3.125rem;
          background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, #141414 100%);

          .mark {
            @apply text-sm text-white-80 flex items-center mr-2;
            height: 0.875rem;
            line-height: 0.875rem;

            .tmdb {
              @apply mr-1 h-3;
              width: 0.9375rem;
            }

            .douban {
              @apply mr-1 h-3 w-3;
            }
          }

          .name {
            @apply text-sm text-white w-full mb-1;
            line-height: 0.875rem;
          }
        }
      }
    }
  }
}
